<template>
	<view class="detail" v-if="detailObj.goods_name">
		<!-- 轮播图区域 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			:circular="true">
			<swiper-item v-for="(item, index) in detailObj.pics" :key="index">
				<image @click="preImage(index)" :src="item.pics_big_url" mode=""></image>
			</swiper-item>
		</swiper>

		<!-- 商品信息区域 -->
		<view class="infobox">
			<!-- 商品价格 -->
			<view class="price">
				￥{{ detailObj.goods_price }} --- {{ test }}
			</view>
			<view class="info">
				<!-- 商品名称 -->
				<view class="left">
					{{ detailObj.goods_name }}
				</view>
				<view class="right">
					<uni-icons type="star" size="20"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<!-- 商品运费 -->
			<view class="pass">
				快递：免运费
			</view>
		</view>

		<!-- 商品介绍 -->
		<rich-text :nodes="detailObj.goods_introduce"></rich-text>
		<!-- 商品导航 -->
		<uni-goods-nav class="goodsnav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="myclick"
			@buttonClick="mybuttonclick"></uni-goods-nav>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapState('cart', ['test']),
			...mapGetters('cart', ['total'])
		},
		data() {
			return {
				// 商品详情
				detailObj: {},
				// 商品 id
				goods_id: '',
				// 左侧icon
				options: [{
						text: '店铺',
						icon: 'shop'
					},
					{
						text: '购物车',
						icon: 'cart',
						info: '0',
						infoBackgroundColor: '#ff0101',
						infoColor: '#fff'
					}
				],
				// 右侧按钮
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			};
		},
		onLoad(options) {
			// 得到商品id
			this.goods_id = options.goods_id
			// 根据商品id发请求得到商品详情
			this.getDetailObj()
		},
	
		methods: {
			...mapMutations('cart', ['addToCart']),
			async getDetailObj() {
				let {
					data: res
				} = await uni.$http.get(`/api/public/v1/goods/detail?goods_id=${this.goods_id}`)
				// console.log(res);
				// 判断状态
				if (res.meta.status !== 200) return uni.$showMsg()
				// 保存数据
				this.detailObj = res.message
				this.detailObj.goods_introduce = this.detailObj.goods_introduce.replace(/<img /g,
					'<img style="display: block;" ')
				this.detailObj.goods_introduce = this.detailObj.goods_introduce.replace(/.webp/g,
					'.jpg')
			},
			// 预览图片
			preImage(index) {
				// 得到所有要预览的图片链接
				let urls = this.detailObj.pics.map(item => {
					return item.pics_big_url
				})
				// 预览图片
				uni.previewImage({
					urls: urls,
					current: index
				})
			},
			// 左侧的icon
			myclick(e) {
				// 点击左侧购物车的事件
				if (e.index === 1) {
					// 跳转到购物车
					uni.switchTab({
						url: '/pages/cart/cart'
					})
				}
			},
			// 点击右侧的按钮
			mybuttonclick(e) {
				console.log('点击了');
				// 判断是否点击的是加入购物车
				if (e.index === 0) {
					// 把当前商品添加到购物车
					this.addToCart({
						goods_id: this.detailObj.goods_id,
						goods_name: this.detailObj.goods_name,
						goods_small_logo: this.detailObj.goods_small_logo,
						goods_price: this.detailObj.goods_price,
						goods_count: 1,
						goods_status: true
					})
				}
			}
		},
		watch: {
			total: {
				handler: function(newV) {
					// 只要商品数量改变，就让options[1].info中的值改变
					this.options[1].info = newV
				},
				// 打开页面立即执行
				immediate: true
			}
		}
	}
</script>

<style lang="scss">
	.detail {
		padding-bottom: 50px;

		.swiper {
			height: 750rpx;

			image {
				width: 100%;
				height: 750rpx;
			}
		}

		.infobox {
			padding: 0 20rpx;

			.price {
				line-height: 100rpx;
				font-size: 25px;
				color: #c0150f;
			}

			.info {
				padding: 15rpx 0;
				font-size: 16px;
				display: flex;
				justify-content: space-between;

				.left {
					padding-right: 20rpx;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.right {
					width: 400rpx;
					border-left: 1px solid #ababab;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
			}

			.pass {
				font-size: 13px;
				line-height: 60rpx;
				color: #ababab;
			}
		}

		.goodsnav {
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
		}
	}
</style>
